<template>
  <el-card>
    <!-- 2.0 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div ref="box" style="width: 750px;height:400px;"></div>
  </el-card>
</template>

<script>
// 1.0 引入文件
import Echarts from 'echarts'
export default {
  mounted() {
    this.renderLines()
  },
  methods: {
    renderLines() {
      // 3.0 基于准备好的dom，初始化echarts实例
      const myChart = Echarts.init(this.$refs.box)

      // 指定图表的配置项和数据
      const option = {
        // 标题
        title: {
          text: '折线图堆叠'
        },
        // 跟随鼠标移动的提示
        tooltip: {
          trigger: 'axis'
        },
        // 通过点击图例控制哪些系列不显示
        legend: {
          data: ['销售总量', '订单总量']
        },
        // 网格布局，用来让图表显示在画布的什么位置
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // 工具箱，保存为图片
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        // x 轴的信息
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        // y 轴
        yAxis: {
          type: 'value'
        },
        // 数据来源，用来展示核心的图表
        series: [
          {
            name: '销售总量',
            type: 'line',
            stack: '总量',
            data: []
          },
          {
            name: '订单总量',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      }

      // 最核心最核心的一句话！！！ 使用刚指定的配置项和数据显示图表。
      // myChart.setOption(option)
      this.$emit('sendData', {
        myChart,
        option
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
